<script setup>
// example components
import InfosCards from "./InfosCards.vue";
defineProps({
    image: {
        type: [String, Object],
        component: String,
        class: String,
        default: () => {},
    },
    title: {
        type: [String, Object],
        required: true,
        text: String,
        class: String,
    },
    description: {
        type: [String, Object],
        required: true,
        text: String,
        class: String,
        default: () => {},
    },
    imgLeft: {
        type: Boolean,
        default: true,
    },
    bgColor: {
        type: String,
        default: "",
    },
});
</script>
<template>
    <section :class="`position-relative `">
        <!-- <div :class="`container ${imgLeft ? 'ms-0 ps-0' : 'me-0 pe-0'}`"> -->
        <div :class="`container`" :style="`background-image: url(${image.url});background-size: cover;background-position: center center;height: ${image.height ? image.height : '700'}px;transform: translate(0px, 0px);`">
            <div :class="`row  ${bgColor} ${imgLeft ? 'flex-row-reverse' : ''}`">
                <div class="col-lg-8 py-2 px-5">
                    <InfosCards data-aos="fade-left" col="col-md-12" color="info" :title="title" :description="description" />
                </div>
            </div>
        </div>
    </section>
</template>
